<template>
	<view class="regionPage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="backBtn" @click="backNext">
					⋘
				</view>
				<view class="headContentBack1"></view>
				<view class="headContentBack2"></view>
				<p>{{exportShow?'导出账单':'账单管理'}}</p>
			</view>
		</view>
		<view class="chartHead">
			<view class="chooseTimeStr">筛选条件
				<view class="timeClass" @click="timeToggleOpen">{{yearStr}}年份-{{mouthStr}}月份</view>
				<view class="moreTerms" @click="moreTermsChange">{{moreTermsShow?'▲':'▼'}}</view>
			</view>
			<view class="exportBtn" v-if="exportShow" @click="exportList">导出</view>
		</view>
		<view :class="{morePanelSmall: true, morePanelBig: moreTermsShow}">
			<view style="color: #5a5a5a;" v-if="moreTermsShows">账单状态
				<view @click="paymentTermsChange('全部')" :class="{paymentTermsClass: true, paymentTermsChoose: paymentTerms === '全部'}">全部</view>
				<view @click="paymentTermsChange('支出')" :class="{paymentTermsClass: true, paymentTermsChoose: paymentTerms === '支出'}">支出</view>
				<view @click="paymentTermsChange('收入')" :class="{paymentTermsClass: true, paymentTermsChoose: paymentTerms === '收入'}">收入</view>
			</view>
			<view style="color: #5a5a5a;" v-if="moreTermsShows">账单类型
				<view class="kindsChoose" @click="kindToggleOpen">{{kindStr}}</view>
			</view>
			<view style="color: #5a5a5a;" v-if="moreTermsShows">金额范围
				<view style="margin-left: 10rpx;height: 50rpx;display: flex;align-items: center;">
					<view class="reduceClass" @click="minMoneyChange(false)">-</view>
					<view class="numberClass">{{minMoney}}</view>
					<view class="addClass" @click="minMoneyChange(true)">+</view>
				</view>至
				<view style="height: 50rpx;display: flex;align-items: center;">
					<view class="reduceClass" @click="maxMoneyChange(false)">-</view>
					<view class="numberClass">{{maxMoney}}</view>
					<view class="addClass" @click="maxMoneyChange(true)">+</view>
				</view>
			</view>
			<view style="flex-direction: row-reverse;" v-if="moreTermsShows">
				<view class="moreYes" @click="getServerDatas(true)">确定</view>
				<view class="moreNo" @click="moreTermsChange">取消</view>
				<view class="moreNo" @click="moreTermsDel">清空</view>
			</view>
		</view>
		<view class="pageContent">
			<view class="allDataScroll">
				<view class="allDataTitle">
					<view>收入￥{{allData.revenue.toFixed(2)}}&nbsp;&nbsp;&nbsp;支出￥{{allData.expenditures.toFixed(2)}}</view>
					<view>合计￥{{allData.sum.toFixed(2)}}</view>
				</view>
				<scroll-view class="allDataContent" scroll-y :show-scrollbar="false">
					<view v-if="everyDayItem.length === 0" style="width: 100%;font-size: 26rpx;text-align: center;color: #336eec;">暂无数据</view>
					<view :class="{everyItem: true,everyItemBig: item.click && !exportShow,everyItemBig2: item.click && exportShow}" v-for="(item,index) in everyDayItem" :key="index" @click="openDayData(index)">
						<view class="dayDataSmall">
							<view style="width: 130rpx;">{{item.type}}</view>
							<view style="width: 300rpx;text-align: center;">{{item.payment}}{{item.formula}}元</view>
							<view style="width: 200rpx;">{{item.time}}</view>
							<view style="color: #ebebeb;" v-if="!item.click">▼</view>
							<view style="color: #ebebeb;" v-if="item.click">▲</view>
						</view>
						<view class="dayDataBig" v-if="item.show">
							备注:&nbsp;&nbsp;{{item.remark?item.remark:'未填写'}}
						</view>
						<view class="changeBtns" v-if="item.show && !exportShow">
							<view style="background-color: #ff5871;" @click.stop="delDayItem(item)">删除</view>
							<view style="background-color: #69a3ff ;" @click.stop="changeToggleOpen(item)">修改</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<uni-popup ref="timePopup" :is-mask-click="false" style="position: relative;z-index: 99999;">
			<view class="popup-content" style="position: relative;z-index: 99999;">
				<view class="timePopup">
					<view class="timeHead">
						<view @click="timeToggleClose">取消</view>
						<view @click="timeChoose" style="color: #336eec;">确定</view>
					</view>
					<view class="timeContent">
						<picker-view
							indicator-style="height: 100rpx;background-color: rgba(240, 240, 240, 0.2);color: #000;"
							:value="value" @change="bindChange" class="picker-view">
							<picker-view-column>
								<view class="timeItem" v-for="(item,index) in yearList" :key="index">{{item}}年份</view>
							</picker-view-column>
							<picker-view-column>
								<view class="timeItem" v-for="(item,index) in mouthList" :key="index">{{item}}月份</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="kindPopup" :is-mask-click="false" style="position: relative;z-index: 99999;">
			<view class="popup-content" style="position: relative;z-index: 99999;">
				<view class="timePopup">
					<view class="timeHead">
						<view @click="kindClose">取消</view>
						<view @click="kindChoose" style="color: #336eec;">确定</view>
					</view>
					<view class="timeContent">
						<picker-view
							indicator-style="height: 100rpx;background-color: rgba(240, 240, 240, 0.2);color: #000;"
							:value="value" @change="kindChange" class="picker-view">
							<picker-view-column>
								<view class="timeItem" v-for="(item,index) in kindList" :key="index">{{item}}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="changePopup" :is-mask-click="false" style="position: relative;z-index: 99999;">
			<view class="popup-content" style="position: relative;z-index: 99999;">
				<view class="timePopup">
					<view class="timeHead">
						<view @click="changeToggleClose" style="color: #a6a6a6; ">取消</view>
						<view @click="changeDayItem" style="color: #336eec; ">保存</view>
					</view>
					<view class="itemDataContent">
						<view class="dataTime">日期
							<view style="color: #989898;margin-left: 10rpx;line-height: 50rpx;">
								{{changeItemData.time}}
							</view>
						</view>
						<view class="dataType">类型
							<view style="color: #989898;margin-left: 10rpx;line-height: 50rpx;">
								{{changeItemData.type}}
							</view>
						</view>
						<view class="dataState">状态
							<view :class="{paymentsClass: true, expenses: newChangeItemData.payment === '支出'}" @click="paymentsChange(false)">支出</view>
							<view :class="{paymentsClass: true, income: newChangeItemData.payment === '收入'}" @click="paymentsChange(true)">收入</view>
						</view>
						<view class="dataNum">金额
							<view style="margin-left: 10rpx;height: 50rpx;display: flex;align-items: center;">
								<view class="reduceClass" @click="formulaChange(false)">-</view>
								<view class="numberClass">{{newChangeItemData.formula}}</view>
								<view class="addClass"  @click="formulaChange(true)">+</view>
							</view>
						</view>
						<view class="dataStr">备注
							<textarea v-model="newChangeItemData.remark" maxlength="30" placeholder="请输入备注" 
								style="margin-left: 10rpx; width: 600rpx;height: 150rpx;font-size: 28rpx;letter-spacing: 2rpx;border: 1rpx solid #c7c7c7;border-radius: 8rpx;"/>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import * as XLSX from '../../api/Excel/excel.js'
	export default {
		data() {
			return {
				values: [0,0],
				value: [0,0],
				yearList: ['全部'],
				mouthList: ['全部'],
				yearStr: '全部',
				mouthStr: '全部',
				spendDatas: {},
				everyDayItem: [],
				allData: {
					revenue: 0,
					expenditures: 0,
					sum: 0
				},
				canvasShow: true,
				spendColorList: [],
				revenueColorList: [],
				spendList: [],
				revenueList: [],
				changeItemData: null,
				newChangeItemData: null,
				exportShow: false,
				moreTermsShow: false,
				moreTermsShows: false,
				paymentTerms: '全部',
				kindList: ['全部'],
				kind:[0],
				kindStr: '全部',
				minMoney: 0,
				maxMoney: 0
			}
		},
		onLoad(option){
			if(option.key === 'export'){
				this.exportShow = true
			}else{
				this.exportShow = false
			}
		},
		mounted() {
			this.getJsonDate()
			this.getServerDatas();
		},
		methods: {
			moreTermsDel(){
				this.paymentTerms = '全部',
				this.kindList = ['全部'],
				this.kind = [0],
				this.kindStr = '全部',
				this.minMoney = 0,
				this.maxMoney = 0
			},
			maxMoneyChange(key){
				if(key){
					this.maxMoney++
				}else{
					if(this.maxMoney > 0){
						this.maxMoney--
					}
				}
			},
			minMoneyChange(key){
				if(key){
					this.minMoney++
				}else{
					if(this.minMoney > 0){
						this.minMoney--
					}
				}
				if(this.minMoney > this.maxMoney){
					this.maxMoney = this.minMoney
				}
			},
			paymentTermsChange(key){
				this.paymentTerms = key
			},
			moreTermsChange(){
				this.moreTermsShow = !this.moreTermsShow
				if(this.moreTermsShow){
					setTimeout(()=>{
						this.moreTermsShows = true
					},200)
				}else{
					this.moreTermsShows = false
				}
			},
			getkindList(){
				this.kindList = ['全部']
				let dates = uni.getStorageSync('typeData')
				if(dates){
					let list = JSON.parse(dates)
					list.forEach(item => {
						this.kindList.push(item.type)
					})
					this.$forceUpdate()
				}
			},
			kindChange(e){
				this.kind = e.detail.value
			},
			exportList(){
				let that = this
				let excelList = []
				for(let i = 0; i < this.everyDayItem.length; i++){
					let obj = {
						time: this.everyDayItem[i].time,
						payment: this.everyDayItem[i].payment,
						type: this.everyDayItem[i].type,
						formula: this.everyDayItem[i].formula,
						remark: this.everyDayItem[i].remark,
					}
					excelList.push(obj)
				}
				let objj = {time: '',payment: '',type: '',formula: '',remark: ''}
				let objAll = {
					time: '',
					payment: '',
					type: '总支出' + that.allData.expenditures + '元',
					formula: '总收入' + that.allData.revenue + '元',
					remark: '合计' + that.allData.sum + '元',
				}
				excelList.push(objj)
				excelList.push(objAll)
				const fileName='账单'
				const header = ['time','payment','type','formula','remark']
				const headerName = {time:'日期',payment:'状态',type:'类型',formula:'金额/元',remark:'备注'}
				const ExcelData = excelList
				let str = ''
				if(this.paymentTerms !== '全部'){
					str += this.paymentTerms + '状态'
				}
				if(this.kindStr !== '全部'){
					str += this.kindStr + '类型'
				}
				if(this.maxMoney !== 0){
					str += this.minMoney + '元以上' + this.maxMoney + '元以下'
				}
				uni.showModal({
					title: '导出提示',
					content: '确定导出' + that.yearList[that.value[0]] + '年' + that.mouthList[that.value[1]] + '月的' + str +'账单？',
					success: function (res) {
						if (res.confirm) {
							XLSX.excel_exprot(ExcelData, header, headerName,fileName)
						} else if (res.cancel) {
							uni.showToast({
								title: '取消操作',
								icon: 'none',
								duration: 1000
							})
							return
						}
					}
				});
			},
			changeDayItem(){
				let that = this
				let dates = uni.getStorageSync('storageDataJson')
				let dataJson = JSON.parse(dates)
				let dayList = dataJson[this.changeItemData.time.substr(0,4)][this.changeItemData.time.substr(0,7)][this.changeItemData.time.substr(0,10)]['dayData']
				let obj = {
					time: this.changeItemData.time,
					type: this.changeItemData.type,
					payment: this.changeItemData.payment,
					formula: this.changeItemData.formula,
					remark: this.changeItemData.remark
				}
				let newObj = {
					time: this.newChangeItemData.time,
					type: this.newChangeItemData.type,
					payment: this.newChangeItemData.payment,
					formula: this.newChangeItemData.formula,
					remark: this.newChangeItemData.remark
				}
				for(let i = 0; i < dayList.length; i++){
					if(JSON.stringify(dayList[i]) == JSON.stringify(obj)){
						dayList[i] = newObj
						dataJson[this.changeItemData.time.substr(0,4)][this.changeItemData.time.substr(0,7)][this.changeItemData.time.substr(0,10)]['dayData'] = dayList
						let newDataJson = that.computeStats(dataJson)
						uni.setStorageSync('storageDataJson', JSON.stringify(newDataJson));
						that.getJsonDate()
						that.getServerDatas();
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 1000
						})
						this.$refs.changePopup.close()
						setTimeout(()=>{
							this.changeItemData = null
							this.newChangeItemData = null
						},500)
						break
					}
				}
			},
			formulaChange(key){
				if(key){
					this.newChangeItemData.formula++
				}else{
					if(this.newChangeItemData.formula > 1){
						this.newChangeItemData.formula--
					}
				}
				this.$forceUpdate()
			},
			paymentsChange(bool){
				if(!bool){
					this.newChangeItemData.payment = '支出'
				}else{
					this.newChangeItemData.payment = '收入'
				}
				this.$forceUpdate()
			},
			delDayItem(data){
				let that = this
				uni.showModal({
					title: '删除提示',
					content: '确定删除账单？',
					success: function (res) {
						if (res.confirm) {
							let dates = uni.getStorageSync('storageDataJson')
							let dataJson = JSON.parse(dates)
							let dayList = dataJson[data.time.substr(0,4)][data.time.substr(0,7)][data.time.substr(0,10)]['dayData']
							let obj = {
								time: data.time,
								type: data.type,
								payment: data.payment,
								formula: data.formula,
								remark: data.remark
							}
							for(let i = 0; i < dayList.length; i++){
								if(JSON.stringify(dayList[i]) == JSON.stringify(obj)){
									dayList.splice(i,1)
									dataJson[data.time.substr(0,4)][data.time.substr(0,7)][data.time.substr(0,10)]['dayData'] = dayList
									let newDataJson = that.computeStats(dataJson)
									uni.setStorageSync('storageDataJson', JSON.stringify(newDataJson));
									that.getJsonDate()
									that.getServerDatas();
									uni.showToast({
										title: '操作成功',
										icon: 'none',
										duration: 1000
									})
									break
								}
							}
						} else if (res.cancel) {
							uni.showToast({
								title: '取消操作',
								icon: 'none',
								duration: 1000
							})
							return
						}
					}
				});
			},
			//计算每月统计
			computeStats(jsonData){
				let datas = jsonData
				let yearList = Object.keys(datas)
				for(let i = 0; i < yearList.length; i++){
					let mouthList = Object.keys(datas[yearList[i]])
					let yearSum = {
						expenditures: 0,
						revenue: 0,
						sum: 0,
						type: {},
					}
					for(let j = 0; j < mouthList.length; j++){
						if(mouthList[j] !== 'yearSum'){
							let dayList = Object.keys(datas[yearList[i]][mouthList[j]])
							let monthSum = {
								expenditures: 0,
								revenue: 0,
								sum: 0,
								type: {},
							}
							for(let z = 0; z < dayList.length; z++){
								if(dayList[z] !== 'monthSum'){
									let dayDataList = datas[yearList[i]][mouthList[j]][dayList[z]]['dayData']
									if(dayDataList.length === 0){
										delete datas[yearList[i]][mouthList[j]][dayList[z]]
										continue
									}
									let daySum = {
										expenditures: 0,
										revenue: 0,
										sum: 0,
										type: {},
									}
									for(let a = 0; a < dayDataList.length; a++){
										if(dayDataList[a].payment == '支出'){
											daySum.expenditures = Number(daySum.expenditures) + Number(dayDataList[a].formula)
											if(!daySum.type[dayDataList[a].type] && daySum.type[dayDataList[a].type] !== 0){
												daySum.type[dayDataList[a].type] = 0 - Number(dayDataList[a].formula)
											}else{
												if(daySum.type[dayDataList[a].type] > 0){
													daySum.type[dayDataList[a].type] = Number(daySum.type[dayDataList[a].type]) - Math.abs(Number(dayDataList[a].formula))
												}else{
													daySum.type[dayDataList[a].type] = Math.abs(Number(daySum.type[dayDataList[a].type])) + Math.abs(Number(dayDataList[a].formula))
													daySum.type[dayDataList[a].type] = 0 - Number(daySum.type[dayDataList[a].type])
												}
											}
										}else{
											daySum.revenue = Number(daySum.revenue) + Number(dayDataList[a].formula)
											if(!daySum.type[dayDataList[a].type] && daySum.type[dayDataList[a].type] !== 0){
												daySum.type[dayDataList[a].type] = Number(dayDataList[a].formula)
											}else{
												daySum.type[dayDataList[a].type] = Number(daySum.type[dayDataList[a].type]) + Number(dayDataList[a].formula)
											}
										}
									}
									daySum.sum = Number(daySum.revenue) - Number(daySum.expenditures)
									datas[yearList[i]][mouthList[j]][dayList[z]]['daySum'] = daySum
									monthSum.expenditures = Number(daySum.expenditures) + Number(monthSum.expenditures)
									monthSum.revenue = Number(daySum.revenue) + Number(monthSum.revenue)
									monthSum.sum = Number(monthSum.revenue) - Number(monthSum.expenditures)
									let daySumTypeKeyList = Object.keys(daySum.type)
									if(daySumTypeKeyList.length > 0){
										for(let b = 0; b < daySumTypeKeyList.length; b++){
											if(!monthSum.type[daySumTypeKeyList[b]] && monthSum.type[daySumTypeKeyList[b]] !== 0){
												monthSum.type[daySumTypeKeyList[b]] = daySum.type[daySumTypeKeyList[b]]
											}else{
												if(monthSum.type[daySumTypeKeyList[b]] > 0){
													monthSum.type[daySumTypeKeyList[b]] = Number(monthSum.type[daySumTypeKeyList[b]]) + Number(daySum.type[daySumTypeKeyList[b]])
												}else{
													if(Number(daySum.type[daySumTypeKeyList[b]]) < 0){
														monthSum.type[daySumTypeKeyList[b]] = Math.abs(Number(monthSum.type[daySumTypeKeyList[b]])) + Math.abs(Number(daySum.type[daySumTypeKeyList[b]]))
														monthSum.type[daySumTypeKeyList[b]] = 0 - Number(monthSum.type[daySumTypeKeyList[b]])
													}else{
														monthSum.type[daySumTypeKeyList[b]] = Number(monthSum.type[daySumTypeKeyList[b]]) + Number(daySum.type[daySumTypeKeyList[b]])
													}
												}
											}
										}
									}
								}
							}
							datas[yearList[i]][mouthList[j]]['monthSum'] = monthSum
							yearSum.expenditures = Number(monthSum.expenditures) + Number(yearSum.expenditures)
							yearSum.revenue = Number(monthSum.revenue) + Number(yearSum.revenue)
							yearSum.sum = Number(yearSum.revenue) - Number(yearSum.expenditures)
							let monthSumTypeKeyList = Object.keys(monthSum.type)
							if(monthSumTypeKeyList.length > 0){
								for(let c = 0; c < monthSumTypeKeyList.length; c++){
									if(!yearSum.type[monthSumTypeKeyList[c]] && yearSum.type[monthSumTypeKeyList[c]] !== 0){
										yearSum.type[monthSumTypeKeyList[c]] = monthSum.type[monthSumTypeKeyList[c]]
									}else{
										if(yearSum.type[monthSumTypeKeyList[c]] > 0){
											yearSum.type[monthSumTypeKeyList[c]] = Number(yearSum.type[monthSumTypeKeyList[c]]) + Number(monthSum.type[monthSumTypeKeyList[c]])
										}else{
											yearSum.type[monthSumTypeKeyList[c]] = Math.abs(Number(yearSum.type[monthSumTypeKeyList[c]])) + Math.abs(Number(monthSum.type[monthSumTypeKeyList[c]]))
											yearSum.type[monthSumTypeKeyList[c]] = 0 - Number(yearSum.type[monthSumTypeKeyList[c]])
										}
									}
								}
							}
						}
					}
					datas[yearList[i]]['yearSum'] = yearSum
				}
				return datas
			},
			getServerDatas(key) {
				if(key){
					this.getJsonDate()
				}
				let typeData = []
				let typeDatas = []
				for(let i in this.everyDayItem){
					if(this.everyDayItem[i].payment === '支出'){
						typeData.push(this.everyDayItem[i].type)
					}else{
						typeDatas.push(this.everyDayItem[i].type)
					}
				}
				if(this.paymentTerms !== '全部'){
					let newList = []
					for(let i in this.everyDayItem){
						if(this.everyDayItem[i].payment === this.paymentTerms){
							newList.push(this.everyDayItem[i])
						}
					}
					this.everyDayItem = newList
				}
				if(this.kindStr !== '全部'){
					let newList = []
					for(let i in this.everyDayItem){
						if(this.everyDayItem[i].type === this.kindStr){
							newList.push(this.everyDayItem[i])
						}
					}
					this.everyDayItem = newList
				}
				if(this.maxMoney !== 0){
					let newList = []
					for(let i in this.everyDayItem){
						if(this.everyDayItem[i].formula < this.maxMoney && this.everyDayItem[i].formula > this.minMoney){
							newList.push(this.everyDayItem[i])
						}
					}
					this.everyDayItem = newList
				}
				this.allData = {revenue: 0,expenditures: 0,sum: 0}
				for(let i in this.everyDayItem){
					if(this.everyDayItem[i].payment === '支出'){
						this.allData.expenditures = Number(this.allData.expenditures) + Number(this.everyDayItem[i].formula)
					}else{
						this.allData.revenue = Number(this.allData.revenue) + Number(this.everyDayItem[i].formula)
					}
				}
				this.allData.sum = Number(this.allData.revenue) - Number(this.allData.expenditures)
				if(key){
					this.moreTermsChange()
				}
				this.$forceUpdate()
				let spendData = this.setChartsFormat(typeData)
				let revenueData = this.setChartsFormat(typeDatas)
				this.spendColorList = []
				this.revenueColorList = []
				this.spendList = []
				this.revenueList = []
				for(let i in spendData){
					this.spendColorList.push('#'+Math.random().toString(16).substr(2, 6))
				}
				for(let i in revenueData){
					this.revenueColorList.push('#'+Math.random().toString(16).substr(2, 6))
				}
				let res = {series: [{data: spendData}]};
				let ress = {series: [{data: revenueData}]};
				this.spendList = spendData
				this.revenueList = revenueData
			},
			setChartsFormat(typeData){
				let spendData = []
				let result = Array.from(new Set(typeData))
				result.forEach(item => {
					let obj = {}
					obj.name = item
					obj.value = 0
					spendData.push(obj)
				})
				for(let i in spendData){
					for(let j in this.everyDayItem){
						if(spendData[i].name === this.everyDayItem[j].type){
							spendData[i].value = Number(spendData[i].value) + Number(this.everyDayItem[j].formula)
						}
					}
				}
				for(let i = 0; i < spendData.length; i++) {
					for (let j = 0; j < spendData.length - i - 1; j++) {
						if (spendData[j].value < spendData[j+1].value) {
							let temp = spendData[j]
							spendData[j] = spendData[j + 1]
							spendData[j + 1] = temp
						}
					}
				}
				if(spendData.length > 20){
					let obj = {name: "小比重类型",value: 0}
					for(let i = 20; i < spendData.length; i++){
						obj.value = Number(obj.value) + Number(spendData[i].value)
					}
					spendData.length = 20
					spendData[20] = obj
				}
				return spendData
			},	
			getJsonDate(){
				let dates = uni.getStorageSync('storageDataJson')
				if(dates){
					this.spendDatas = JSON.parse(dates)
					let yearLists = Object.keys(this.spendDatas)
					this.yearList = ['全部'],
					this.yearList = [...this.yearList, ...yearLists]
					this.$forceUpdate()
				}
				this.getDayData()
				this.setDayDataFormat()
			},
			openDayData(index){
				let that = this
				this.everyDayItem[index].click = !this.everyDayItem[index].click
				setTimeout(function(){
					that.everyDayItem[index].show = !that.everyDayItem[index].show
					that.$forceUpdate()
				},150)
				this.$forceUpdate()
			},
			setDayDataFormat(){
				for(let i in this.everyDayItem){
					this.everyDayItem[i].click = false
					this.everyDayItem[i].show = false
				}
				this.$forceUpdate()
			},
			getDayData(){
				//this.mouthList = ['全部'],
				let that = this
				let dates = uni.getStorageSync('storageDataJson')
				if(!dates){
					this.everyDayItem = []
					return
				}
				let resData = JSON.parse(dates)
				let yearLists = Object.keys(resData)
				if(yearLists.length === 0){
					this.everyDayItem = []
					return
				}
				if(this.value[0] === 0){
					// 选择全部数据
					this.everyDayItem = []
					let mouthNum = []
					for(let i in yearLists){
						let dataList = Object.keys(resData[yearLists[i]])
						dataList.forEach(item =>  {
							if(item !== 'yearSum'){
								let obj = {}
								let numStr = item.split("-")[0] + '' + item.split("-")[1]
								obj.mouthNum = Number(numStr)
								obj.mouth = item
								mouthNum.push(obj)
							}
						})
					}
					for(let i = 0; i < mouthNum.length; i++) {
						for (let j = 0; j < mouthNum.length - i - 1; j++) {
							if (mouthNum[j].mouthNum < mouthNum[j+1].mouthNum) {
								let temp = mouthNum[j]
								mouthNum[j] = mouthNum[j + 1]
								mouthNum[j + 1] = temp
							}
						}
					}
					let moutnList = []
					Object.keys(mouthNum).sort().forEach(function(item){
						moutnList.push(mouthNum[item].mouth)
					})
					let dayList = []
					for(let i in moutnList){
						let yearStr = moutnList[i].split("-")[0]
						dayList.push(...this.sortDayList(resData[yearStr][moutnList[i]]))
					}
					dayList.forEach(item =>{
						let year = item.split("-")[0]
						let mouth = item.split("-")[0] + '-' + item.split("-")[1]
						this.everyDayItem.push(...resData[year][mouth][item]['dayData'])
					})
					that.$forceUpdate()
					return
				}
				// 进行数据筛选
				if(this.value[0] !== 0 && this.value[1] === 0){
					this.everyDayItem = []
					let yearData = resData[that.yearList[this.value[0]]]
					let dayJson = {}
					Object.keys(yearData).sort().forEach(item => {
						if(item !== 'yearSum'){
							dayJson = {...dayJson,...yearData[item]}
						}
					})
					let dayList = this.sortDayList(dayJson)
					dayList.forEach(item =>{
						let year = item.split("-")[0]
						let mouth = item.split("-")[0] + '-' + item.split("-")[1]
						this.everyDayItem.push(...resData[year][mouth][item]['dayData'])
					})
					this.$forceUpdate()
					return
				}
				this.everyDayItem = []
				let mouthData = resData[that.yearList[this.value[0]]][that.yearList[this.value[0]] + '-' + that.mouthList[this.value[1]]]
				let dayList = this.sortDayList(mouthData)
				dayList.forEach(item =>{
					let year = item.split("-")[0]
					let mouth = item.split("-")[0] + '-' + item.split("-")[1]
					this.everyDayItem.push(...resData[year][mouth][item]['dayData'])
				})
				this.$forceUpdate()
			},
			sortDayList(jsonData){
				let dayNum = []
				Object.keys(jsonData).sort().forEach(function(item){
					if(item !== 'monthSum'){
						let numStr = item.split("-")[0] + '' + item.split("-")[1] + '' + item.split("-")[2]
						let obj = {}
						obj.dayNum = Number(numStr)
						obj.day = item
						dayNum.push(obj)
					}
				})
				for(let i = 0; i < dayNum.length; i++) {
					for (let j = 0; j < dayNum.length - i - 1; j++) {
						if (dayNum[j].dayNum < dayNum[j+1].dayNum) {
							let temp = dayNum[j]
							dayNum[j] = dayNum[j + 1]
							dayNum[j + 1] = temp
						}
					}
				}
				let dayList = []
				Object.keys(dayNum).sort().forEach(function(item){
					dayList.push(dayNum[item].day)
				})
				return dayList
			},
			bindChange(e) {
				this.values = e.detail.value
				if(this.yearList[this.values[0]] == '全部'){
					this.mouthList = ['全部']
					return
				}
				let mouthLists = Object.keys(this.spendDatas[this.yearList[this.values[0]]])
				this.mouthList = ['全部']
				mouthLists.forEach(item => {
					if(item !== "yearSum"){
						this.mouthList.push(item.substring(5,7))
					}
				})
			},
			timeChoose() {
				let that = this
				this.value = this.values
				this.yearStr = this.yearList[this.value[0]]
				this.mouthStr = this.mouthList[this.value[1]]
				this.getDayData()
				this.$refs.timePopup.close()
				setTimeout(function(){
					that.canvasShow = true
					that.getServerDatas();
				},200)
			},
			kindChoose(){
				this.kindStr = this.kindList[this.kind]
				this.$forceUpdate()
				this.$refs.kindPopup.close()
			},
			kindClose(){
				this.$refs.kindPopup.close()
			},
			kindToggleOpen() {
				this.getkindList()
				this.$refs.kindPopup.open('bottom')
			},
			timeToggleOpen() {
				this.$refs.timePopup.open('bottom')
				this.canvasShow = false
			},
			changeToggleOpen(data) {
				let dataStr = JSON.stringify(data)
				this.changeItemData = JSON.parse(dataStr)
				this.newChangeItemData = JSON.parse(dataStr)
				this.$refs.changePopup.open('bottom')
				this.canvasShow = false
			},
			changeToggleClose() {
				this.$refs.changePopup.close()
				uni.showToast({
					title: '取消操作',
					icon: 'none',
					duration: 1000
				})
				setTimeout(()=>{
					this.changeItemData = null
					this.newChangeItemData = null
				},100)
			},
			timeToggleClose() {
				let that = this
				this.$refs.timePopup.close()
				setTimeout(function(){
					that.canvasShow = true
					that.getServerDatas();
				},500)
			},
			backNext(){
				uni.navigateBack({
					delta: 1,
				});
			}
		}
	};
</script>

<style>
	::-webkit-scrollbar {
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	}
	
	.regionPage {
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: rgba(230, 240, 255, 1.0);
	}

	.pageHeader{
		width: 100%;
		height: 11vh;
		position: relative;
		background: linear-gradient(to right, rgba(0, 47, 167, 0.9), rgba(0, 47, 167, 0.4));
		overflow: hidden;
	}
	
	.pageHeader .headContent{
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent > p{
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}
	
	.pageHeader .headContent .backBtn{
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		z-index: 30;
		margin-top: 1vh;
		left: 20rpx;
		font-size: 60rpx;
		font-weight: 400;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent .headContentBack1{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		background-color: rgba(0, 47, 167, 0.3);
	}
	
	.pageHeader .headContent .headContentBack2{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		background-color: rgba(0, 47, 167, 0.5);
	}

	.timePopup {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
	}

	.timePopup .timeHead {
		height: 70rpx;
		width: 100%;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.timePopup .timeHead>view {
		/* width: 20%; */
		height: 70rpx;
		margin: 0 20rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
	}

	.timePopup .timeContent {
		width: 100%;
		border-bottom: 1rpx solid #efefef;
	}

	.timePopup .timeContent .picker-view {
		width: 100%;
		height: 800rpx;
	}

	.timePopup .timeContent .picker-view .timeItem {
		height: 100rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
	}

	.chartHead {
		width: 750rpx;
		height: 80rpx;
		position: relative;
		top: 0;
		z-index: 100;
		display: flex;
		justify-content: space-between;
		background-color: rgba(255, 255, 255, 1.0);
		box-sizing: border-box;
		padding:0 14rpx;
		align-items: center;
	}
	
	.chartHead .exportBtn{
		width: 120rpx;
		height: 60rpx;
		background-color: #2178bf;
		font-size: 30rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		letter-spacing: 4rpx;
		font-weight: 500;
	}
	
	.chartHead .chooseTimeStr{
		/* width: 500rpx; */
		height: 80rpx;
		/* line-height: 80rpx; */
		font-size: 30rpx;
		/* font-weight: 500; */
		display: flex;
		align-items: center;
		color: #5a5a5a;
	}
	
	.chartHead .chooseTimeStr .timeClass{
		height: 56rpx;
		box-sizing: border-box;
		padding: 0 12rpx;
		text-align: center;
		line-height: 54rpx;
		border: 1px solid #e4e4e4;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}
	
	.chartHead .chooseTimeStr .moreTerms{
		line-height: 50rpx; 
		text-align: center;
		margin-left: 20rpx;
		color: #2178bf ;
		font-size: 28rpx;
		width: 54rpx;
		height: 54rpx;
		border: 2rpx solid #2178bf;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
	
	.chartHead .nearTimeBtn{
		height: 80rpx;
		margin-right: 10rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: rgba(0, 47, 167, 0.8);
		text-align: right;
		display: flex;
	}
	
	.pageContent {
		width: 100%;
		height: calc(98vh - 82rpx);
		position: relative;
		top: 0;
		z-index: 100;
	}
	
	.allDataTitle{
		width: 710rpx;
		height: 50rpx;
		margin: 10rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #ededed;
	}
	
	.allDataTitle > view{
		font-size: 28rpx;
		line-height: 50rpx;
		color: #868686;
		font-weight: 400;
		white-space: nowrap;
	}
	
	.allDataContent{
		width: 710rpx;
		height: calc(80vh - 90rpx);
		margin: 10rpx;
		position: absolute;
		top: 70rpx;
	}
	
	.everyItem{
		font-size: 28rpx;
		width: 710rpx;
		height: 60rpx;
		margin-bottom:6rpx;
		background-color: #f4feff;
		border-radius: 4rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		transition: all 0.2s ease-in-out; 
	}
	
	.everyItemBig{
		height: 220rpx;
		transition: all 0.2s ease-in-out; 
	}
	
	.everyItemBig2{
		height: 150rpx;
		transition: all 0.2s ease-in-out; 
	}
	
	.dayDataSmall{
		display: flex;
		justify-content: space-between;
	}
	
	.dayDataSmall > view{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #a0a0a0;
	}
	
	.dayDataBig{
		min-height: 80rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #a0a0a0;
	}
	
	.changeBtns{
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.changeBtns > view{
		width: 330rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		letter-spacing: 8rpx;
		border-radius: 10rpx;
		color: #ededed;
	}
	
	.allDataScroll{
		width: 730rpx;
		height: 80vh;
		margin: 10rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		background-color: rgba(255, 255, 255, 1.0);
		box-shadow: 2rpx 2px 4px rgba(225, 225, 225, 1.0),
			-2rpx -2rpx 4px rgba(225, 225, 225, 1.0);
	}
	
	.itemAllData{
		position: relative;
		float: left;
		min-width: 120rpx;
		margin: 4rpx 10rpx;
		height: 45rpx;
		white-space: nowrap;
		font-size: 26rpx;
	}
	
	.itemDataContent{
		padding-bottom: 50rpx;
		box-sizing: border-box;
	}
	
	.itemDataContent > view{
		width: 710rpx;
		min-height: 80rpx;
		margin: 10rpx 20rpx;
		display: flex;
		font-size: 32rpx;
		align-items: center;
	}
	
	.paymentsClass{
		width: 110rpx;
		height: 50rpx;
		margin-left: 20rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		letter-spacing: 8rpx;
		border: 1rpx solid rgb(200, 200, 200);
		background-color: rgb(250, 250, 250);
		color: rgb(200, 200, 200);
		border-radius: 8rpx;
	}
	
	.expenses{
		color: rgba(78, 60, 117, 0.7) !important;
		border: 1rpx solid rgba(78, 60, 117, 0.8) !important;
		background-color: rgba(78, 60, 117, 0.15) !important;
	}
	
	.income{
		color: rgba(202, 157, 50, 0.8) !important;
		border: 1rpx solid rgba(202, 157, 50, 0.7) !important;
		background-color: rgba(202, 157, 50, 0.15) !important;
	}
	
	.reduceClass{
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #2178bf;
		background-color: #4fbcff;
		border-radius: 8rpx;
		box-sizing: border-box;
		margin: 10rpx;
		text-align: center;
		line-height: 35rpx;
		font-size: 30rpx;
		color: #ffffff;
	}
	
	.numberClass{
		width: 120rpx;
		height: 50rpx;
		border: 1rpx solid #979797;
		border-radius: 8rpx;
		box-sizing: border-box;
		margin: 2rpx;
		color: #626262;
		font-size: 32rpx;
		text-align: center;
		line-height: 48rpx;
	}
	
	.addClass{
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #c75715;
		background-color: #ff8b47;
		border-radius: 8rpx;
		box-sizing: border-box;
		margin: 10rpx;
		text-align: center;
		line-height: 35rpx;
		font-size: 30rpx;
		color: #ffffff;
	}
	
	.morePanelSmall{
		width: 740rpx;
		height: 0rpx;
		position: fixed;
		z-index: 500;
		top: calc(11vh + 80rpx);
		left: 5rpx;
		border-radius: 8rpx;
		transition: all 0.2s ease-in-out; 
	}
	
	.morePanelBig{
		width: 740rpx;
		height: 350rpx;
		position: fixed;
		z-index: 500;
		top: calc(11vh + 80rpx);
		left: 5rpx;
		border-radius: 8rpx;
		transition: all 0.2s ease-in-out; 
		background-color: #ffffff;
		border: 2rpx solid rgb(227, 227, 227);
		box-sizing: border-box;
	}
	
	.morePanelSmall > view{
		width: 700rpx;
		height: 70rpx;
		margin: 10rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}
	
	.morePanelSmall > view .paymentTermsClass{
		width: 110rpx;
		height: 50rpx;
		margin-left: 20rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		letter-spacing: 8rpx;
		border: 1rpx solid rgb(200, 200, 200);
		background-color: rgb(250, 250, 250);
		color: rgb(200, 200, 200);
		border-radius: 8rpx;
	}
	
	.paymentTermsChoose{
		color: #ffffff !important;
		border: 1rpx solid #1e72b2 !important;
		background-color: #2ca4ff !important;
	}
	
	.kindsChoose{
		width: 220rpx;
		height: 50rpx;
		margin-left: 20rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		border: 1rpx solid rgb(200, 200, 200);
		background-color: rgb(250, 250, 250);
		color: rgb(101, 101, 101);
		border-radius: 8rpx;
	}
	
	.moreNo{
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		border: 1rpx solid rgb(200, 200, 200);
		background-color: rgb(255, 255, 255);
		color: rgb(151, 151, 151);
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.moreYes{
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		border: 1rpx solid rgb(200, 200, 200);
		background-color: rgb(53, 144, 255);
		color: rgb(255, 255, 255);
		border-radius: 8rpx;
		margin-top: 20rpx;
	}
</style>
